import { useRecoilValue } from 'recoil';
import { detailState } from '@/store'
import RtcPlayer from '@/components/rtcPlayer';
import Talk from '@/components/talk'
import CustomMap from './detailMap'

import styles from './index.module.css'

type ElevatorDetailsProps = {
    visible: boolean,
    hide: () => void,
    currentElevator: Record<string, string | number> | null
}

const url = 'http://106.14.66.52:80/index/api/webrtc?app=rtp&stream=34020000001110000001_34020000001310000001&type=play';

const RescueDetails = (props: ElevatorDetailsProps) => {
    const { visible, hide } = props;
    const detailInfo = useRecoilValue(detailState);

    if (!visible) {
        return <></>;
    }

    return (
        <div className={styles.elevatorDetailsModal}>
            <div className={styles.elevatorDetailsContent}>
                <div className={styles.elevatorDetailsCloseButton} onClick={hide}></div>
                <div className={styles.modalTitle}>智慧救援</div>
                <div className={styles.modalRescueNums}>
                    <div className={styles.modalRescueNumsItem}>
                        <div className={styles.modalRescueNumsItemLabel}>接警救援数</div>
                        <div className={styles.modalRescueNumsItemCount}>208</div>
                    </div>
                    <div className={styles.modalRescueNumsItem}>
                        <div className={styles.modalRescueNumsItemLabel}>处理中</div>
                        <div className={styles.modalRescueNumsItemCount}>112</div>
                    </div>
                    <div className={styles.modalRescueNumsItem}>
                        <div className={styles.modalRescueNumsItemLabel}>待处理</div>
                        <div className={styles.modalRescueNumsItemCount}>87</div>
                    </div>
                </div>
                <div className={styles.filterPosition}>
                    <div>区域选择</div>
                    <div>时间</div>
                    <div>状态选择</div>
                </div>
                <div className={styles.alarmInformation}>
                    <div className={styles.alarmInformationList}>
                        <ul data-status="alerm" data-selected={true}>
                            <li>东厂房西北侧</li>
                            <li>告警</li>
                        </ul>
                        <ul data-status="alerm">
                            <li>昆山市花桥开发区幸福花园2栋</li>
                            <li>告警</li>
                        </ul>
                        <ul data-status="dealing">
                            <li>塔基路1699号1号宿舍楼东侧中间西台</li>
                            <li>处理中</li>
                        </ul>
                        <ul data-status="complete">
                            <li>昆山市锦溪镇邵甸港路328号办公楼大厅南</li>
                            <li>已完成</li>
                        </ul>
                        <ul data-status="complete">
                            <li>石牌毛许路366号1号宿舍楼东侧中间北侧西台</li>
                            <li>已完成</li>
                        </ul>
                        <ul data-status="complete">
                            <li>莱斯路89号2#楼（食堂）西南侧</li>
                            <li>已完成</li>
                        </ul>
                        <ul data-status="complete">
                            <li>塔基路1699号1号宿舍楼西北侧中台</li>
                            <li>已完成</li>
                        </ul>
                    </div>
                </div>
                <div className={styles.elevatorDetailsContentTitle}>
                    <div>当前位置：{detailInfo.address}</div>
                </div>
                <div className={styles.elevatorDetailsContentSubTitle}>
                    <div><span>工单状态：</span><span>进行中</span></div>
                    <div><span>工单总用时：</span><span>3时 27 分 12 秒</span></div>
                </div>
                <div className={styles.processingProgress}>
                    <div className={styles.processingProgressMiddleBar}></div>
                    <div className={styles.processingProgressMiddleBarCover}></div>
                    <div className={styles.processingProgressItem}>
                        <div className={styles.processingProgressItemDate}>2023-11-17</div>
                        <div className={styles.processingProgressItemTime}>11: 08 00</div>
                        <div className={styles.processingProgressItemCircle} data-started={true}></div>
                        <div className={styles.processingProgressItemStepLabel}>通知</div>
                    </div>
                    <div className={styles.processingProgressItem}>
                        <div className={styles.processingProgressItemDate}>2023-11-17</div>
                        <div className={styles.processingProgressItemTime}>12: 13 00</div>
                        <div className={styles.processingProgressItemCircle} data-started={true}></div>
                        <div className={styles.processingProgressItemStepLabel}>派遣</div>
                    </div>
                    <div className={styles.processingProgressItem}>
                        <div className={styles.processingProgressItemDate}>2023-11-17</div>
                        <div className={styles.processingProgressItemTime}>13: 03 35</div>
                        <div className={styles.processingProgressItemCircle} data-started={true}></div>
                        <div className={styles.processingProgressItemStepLabel}>接受</div>
                    </div>
                    <div className={styles.processingProgressItem}>
                        <div className={styles.processingProgressItemDate}>2023-11-17</div>
                        <div className={styles.processingProgressItemTime}>13: 20 00</div>
                        <div className={styles.processingProgressItemCircle} data-started={true}></div>
                        <div className={styles.processingProgressItemStepLabel}>出动</div>
                    </div>
                    <div className={styles.processingProgressItem}>
                        <div className={styles.processingProgressItemDate}></div>
                        <div className={styles.processingProgressItemTime}></div>
                        <div className={styles.processingProgressItemCircle}></div>
                        <div className={styles.processingProgressItemStepLabel}>到达</div>
                    </div>
                    <div className={styles.processingProgressItem}>
                        <div className={styles.processingProgressItemDate}></div>
                        <div className={styles.processingProgressItemTime}></div>
                        <div className={styles.processingProgressItemCircle}></div>
                        <div className={styles.processingProgressItemStepLabel}>救援</div>
                    </div>
                    <div className={styles.processingProgressItem}>
                        <div className={styles.processingProgressItemDate}></div>
                        <div className={styles.processingProgressItemTime}></div>
                        <div className={styles.processingProgressItemCircle}></div>
                        <div className={styles.processingProgressItemStepLabel}>完成</div>
                    </div>
                </div>
                <div className={styles.video}>
                    <RtcPlayer url={url} />
                    <div className={styles.talkButton}>
                        <Talk />
                    </div>
                </div>
                <div className={styles.map}>
                    <CustomMap />
                </div>
                <div className={styles.policeInformation}>
                    <div>
                        <span>当前小区</span>
                        <span>{detailInfo.address}</span>
                    </div>
                    <div>
                        <span>电梯描述</span>
                        <span>{detailInfo.deviceSpec}</span>
                    </div>
                    <div>
                        <span>告警人</span>
                        <span>张一风</span>
                    </div>
                    <div>
                        <span>告警类型</span>
                        <span>困人</span>
                    </div>
                    <div>
                        <span>报警编号</span>
                        <span>9983974</span>
                    </div>
                    <div>
                        <span>场地地址</span>
                        <span>{detailInfo.address}</span>
                    </div>
                </div>
                <div className={styles.rescueWorkers}>
                    <div>
                        <span>姓名</span>
                        <span>{detailInfo.maintenancePartyPeople}</span>
                    </div>
                    <div>
                        <span>电话</span>
                        <span>{detailInfo.maintenancePartyTelephone}</span>
                    </div>
                    <div>
                        <span>实时位置</span>
                        <span>昆山 XX 街道 XXX 路</span>
                    </div>
                </div>
                <div className={styles.contactInformation}>
                    <div>
                        <span>维保单位</span>
                        <span>{detailInfo.maintenanceParty}</span>
                    </div>
                    <div>
                        <span>维保联系人</span>
                        <span>{detailInfo.maintenancePartyPeople}</span>
                    </div>
                    <div>
                        <span>使用单位</span>
                        <span>{detailInfo.userParty}</span>
                    </div>
                    <div>
                        <span>物业联系人</span>
                        <span>{detailInfo.userPartyPeople}</span>
                    </div>
                    <div>
                        <span>物业联系人电话</span>
                        <span>{detailInfo.userPartyTelephone}</span>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default RescueDetails